<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <link rel="stylesheet" href="./demo.css">
    <title>模板语法</title>
</head>
<!--作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示-->

<body>
    <div id="gamecard" align="center">
        <h1>商品列表</h1>
        <div id="box">
            <div v-for="item,index in game" id="lists">
                <div >
                    <h2>{{ item.name}}</h2>
                    <a :href=item.web><img v-bind:src="item.imgName" style="width: 300px;height: 200px;"></a>
                    <p>价格：{{item.money}}</p>
                    <input type="text" v-model="item.buy">
                    <p>剩余数量：{{item.numGame-item.buy}}</p>
                    <button @click="add(index)">新增</button><button v-on:click="remove(index)">删除</button>
                </div>
                

            </div>
        </div>
    </div>
</body>

<script>

    let app = Vue.createApp({
        data: function () {
            return {
                game: [
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    },
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    },
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    }
                ]
            }
        },
        methods:{
            add: function (index) {
                console.log(this.game[index])
                this.game.push(this.game[index])
            },

            remove: function (index) {
                this.game.splice(index, 1);
            }
        },

        computed:{
            num0(){
                 return this.game[0].buy;
            },
            num1(){
                 return this.game[1].buy;
            },
            num2(){
                 return this.game[2].buy;
            },           
        },
        watch:{
            num0:function(newValue,odlValus){
                if(newValue > this.game[0].numGame){
                    alert('库存不足，超出总数')
                }
            },
            num1:function(newValue,odlValus){
                if(newValue > this.game[1].numGame){
                    alert('库存不足，超出总数')
                }
            }, 
            num2:function(newValue,odlValus){
                if(newValue > this.game[2].numGame){
                    alert('库存不足，超出总数')
                }
            },
        }

    })

    app.mount("#gamecard");
</script>

</html>